<template>
<!-- 总系统头部设计 -->
  <div class="main">
          <el-menu :default-active="activeIndex" class="menuhead" mode="horizontal" @select="handleSelect">

              <el-menu-item index="1" @click="toHome()">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1" @click="commonCul()">普通计算器</el-menu-item>
                <el-menu-item index="2-2">科学字符串计算器</el-menu-item>
              </el-submenu>
              <el-menu-item index="3" disabled>消息中心</el-menu-item>
              <el-menu-item index="4" @click="chatRoom()" >聊天系统</el-menu-item>
              <el-menu-item index="6" @click="elsModal()" >俄罗斯方块</el-menu-item>
              <el-menu-item index="5" class="loginButton" @click="toLogin()">登录</el-menu-item>
        </el-menu>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fit:'contain',
      activeIndex:'1'
    }
  },
  methods:{
      handleSelect(){

      },
      toHome(){
          this.$router.push({
            path: "/"
        });
      },
      toLogin(){
        this.$router.push({
            path: "/login"
        });
      },
      commonCul(){
        this.$router.push({
            path: "/calculator"
        });
      },
      chatRoom(){
        this.$router.push({
            path: "/chatmain"
        });
      },elsModal(){
        this.$router.push({
            path: "/elsMain"
        });
      }

  },
  mounted(){
   
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.main{
    position: fixed;
    top: 0;
	width: 100%;
    z-index: 100;
}
.menuhead{
  padding-left: 100px;
}
.loginButton{
    float: right;
}
</style>
